<template>
    <div id="line " style="width: 100%; height: 100%; " v-loading="loading" element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <div id="LineCharts" style="width: 90%; height: 80%;">
        </div>
    </div>
</template>

<script>
import moment from 'moment';
import * as echarts from 'echarts';
import { listUser, All } from '../../api/system/user';
import { MapListALL, getDevice } from '../../api/system/device';
export default {
    props: {
        LineList: {
            type: Array,
            default: () => []
        },
        Time: {
            type: Array,
            default: () => []
        },
        deviceID: Number
    },
    data() {
        return {
            StartTime: "",
            endTime: "",
            text: "",
            data: [],
            loading: false
        }
    },
    mounted() {


    },
    watch: {
        LineList() {
            this.a()
        },
        Time() {
            this.time()
        }
    },
    methods: {
        async time() {
            this.loading = true
            this.data = []
            //X轴刻度
            const StartTime = moment(this.Time[0], "YYYY-MM-DD HH");
            const endTime = moment(this.Time[1], "YYYY-MM-DD HH");
            const timeDifference = endTime.diff(StartTime, 'days');
            console.log(this.Time)
            //YYMMDD时间格式
            const YYStartTime = this.YYMMDD(StartTime)
            const YYendTime = this.YYMMDD(endTime)
            try {
                const list = await All({ deviceID:this.deviceID, beginTime: YYStartTime, endTime: YYendTime })
                console.log(list)
                const result = list.data
                for (let i = 0; i < result.length; i += 60) {
                    const chunk = result[i]
                    this.data.push(chunk);
                }

                this.loading = false

                this.a()
            } catch (error) {
                console.log("统计分析折线图出错", error)
                this.loading = false

            }
        },
        a() {
            var LineCharts = echarts.init(document.getElementById('LineCharts'))
            var option;
            // const name = ['PM2.5', 'PM10', '温度', '湿度', '大气压', '风向', '风力', '风速', '噪声', '风向单位', 'Tsp']
            const name = ['PM2.5', 'PM10']
            option = {
                dataZoom: [
                    {
                        height: 20, //时间滚动条的高度
                        type: 'slider', //type的作用是指定数据缩放的类型，slider表示使用滑动条进行缩放，inside表示使用鼠标滚轮进行缩放。
                        xAxisIndex: 0, //作用在x轴的下标（因为x轴可以有多个）
                        filterMode: 'filter', //间滚动条的过滤模式,'filter'表示滑动时间条时会直接过滤掉不在时间范围内的数据，'weakFilter'表示滑动时间条时会逐渐过滤掉不在时间范围内的数据。
                        // start: 0,  //默认开始位置（百分比）
                        // end: 100,  //默认结束位置（百分比）
                    }
                ],
                title: {
                    text: this.text
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: name.map(item => item)
                },

                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.data.map(item => this.YYYYMMDDHHSS(item.createTime))
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: 'PM2.5',
                        type: 'line',
                        data: this.data.map(item => item.pmTwoFive)
                    },
                    {
                        name: 'PM10',
                        type: 'line',
                        data: this.data.map(item => item.pmTen)
                    },
                    // {
                    //     name: '温度',
                    //     type: 'line',
                    //     data: this.data.map(item => item.wendu)
                    // },
                    // {
                    //     name: '湿度',
                    //     type: 'line',
                    //     data: this.data.map(item => item.shidu)
                    // },
                    // {
                    //     name: '大气压',
                    //     type: 'line',
                    //     data: this.data.map(item => item.daqiya)
                    // },
                    // {
                    //     name: '风向',
                    //     type: 'line',
                    //     data: this.data.map(item => item.fengxiang)
                    // },
                    // {
                    //     name: '风力',
                    //     type: 'line',
                    //     data: this.data.map(item => item.fengli)
                    // },
                    // {
                    //     name: '风速',
                    //     type: 'line',
                    //     data: this.data.map(item => item.fengsu)
                    // },
                    // {
                    //     name: '噪声',
                    //     type: 'line',
                    //     data: this.data.map(item => item.zaosheng)
                    // },
                    // {
                    //     name: '风向单位',
                    //     type: 'line',
                    //     data: this.data.map(item => item.fengxiangDangWei)
                    // },
                    // {
                    //     name: 'Tsp',
                    //     type: 'line',
                    //     data: this.data.map(item => item.tsp)
                    // },

                ]
            };

            option && LineCharts.setOption(option);
        },
        YYMMDD(dateString) {

            // 创建 Date 对象并传入日期字符串
            const dateObj = new Date(dateString);

            // 获取年份、月份和日期
            const year = dateObj.getFullYear();
            const month = String(dateObj.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加 1，并补齐两位数
            const day = String(dateObj.getDate()).padStart(2, '0');

            // 拼接为指定格式的日期字符串
            const formattedDate = `${year}-${month}-${day}`;

            return formattedDate
        },
        YYYYMMDDHHSS(dateString) {
            // 创建 Date 对象并传入日期字符串
            const dateObj = new Date(dateString);

            // 获取年份、月份、日期、小时和分钟
            const year = dateObj.getFullYear();
            const month = String(dateObj.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加 1，并补齐两位数
            const day = String(dateObj.getDate()).padStart(2, '0');
            const hours = String(dateObj.getHours()).padStart(2, '0');
            const minutes = String(dateObj.getMinutes()).padStart(2, '0');

            // 拼接为指定格式的日期时间字符串
            const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}`;

            return formattedDateTime;
        }

    }
}
</script>

<style></style>
